<template>
    <div class="skill">
      <div class="container">
        <div class="text-center">
            <h1>Skills</h1>
         </div>
        <div class="row text-center">
            <div class="col-md-4">
              <div class="border">
                <div id="html"></div>
                <p>HTML、HTML5</p>
              </div>
            </div>
            <div class="col-md-4 ">
                <div class="border">
                    <div id="css"></div>
                    <p>CSS、CSS3、Bootstrap框架</p>
                    </div>
            </div>
            <div class="col-md-4 ">
                <div class="border">
               <div id="js"></div>
                <p>JS、ES6、DOM、JSON</p>
                </div>
            </div>
            <div class="col-md-4 ">
                <div class="border">
              <div id="jq"></div>
              <p>JQUERY、Ajax</p>
              </div>
        </div>
             <div class="col-md-4 ">
                <div class="border">
                <div id="vue"></div>
                      <p>VUE、VUE-ROUTER、VUE脚手架、VUX</p>
                      </div>
             </div>
              <div class="col-md-4 ">
                  <div class="border">
                 <div id="wechat"></div>
                <p>使用MPVUE开发小程序</p>
                </div>
             </div>
             </div> 
       
        </div>
     </div>
  </template>
  
  <script>
import ApexCharts from 'apexcharts'

  export default {
    name: 'skill',
    data () {
      return {
       
      }
    },
    mounted() {
      //HTML
        var html = {
      chart: {
        height: 290,
        type: 'radialBar',
      },
      plotOptions: {
        radialBar: {
          startAngle: 0,
          endAngle: 360,
           hollow: {
            margin: 0,
            size: '70%',
            background: '#fff',
            image: undefined,
            imageOffsetX: 0,
            imageOffsetY: 0,
            position: 'front',
            dropShadow: {
              enabled: true,
              top: 3,
              left: 0,
              blur: 4,
              opacity: 0.24
            }
          },
          track: {
            background: '#fff',
            strokeWidth: '67%',
            margin: 0, // margin is in pixels
            dropShadow: {
              enabled: true,
              top: -3,
              left: 0,
              blur: 4,
              opacity: 0.35
            }
          },

          dataLabels: {
            showOn: 'always',
            name: {
              offsetY: -20,
              show: true,
              color: '#111',
              fontSize: '25px'
            },
            value: {
              formatter: function(val) {
                return '90%';
              },
              color: '#888',
              fontSize: '20px',
              show: true,
            }
          }
        }
      },
      fill: {
        type: 'gradient',
        gradient: {
          shade: 'dark',
          type: 'horizontal',
          shadeIntensity: 0.5,
          gradientToColors: ['#63B8FF'],
          inverseColors: true,
          opacityFrom: 1,
          opacityTo: 1,
          stops: [0, 100]
        }
      },
      series: [90],
      stroke: {
        lineCap: 'round'
      },
      labels: ['HTML'],

    }
      //css
      var css = {
      chart: {
        height: 290,
        type: 'radialBar',
      },
      plotOptions: {
        radialBar: {
          startAngle: 0,
          endAngle: 360,
           hollow: {
            margin: 0,
            size: '70%',
            background: '#fff',
            image: undefined,
            imageOffsetX: 0,
            imageOffsetY: 0,
            position: 'front',
            dropShadow: {
              enabled: true,
              top: 3,
              left: 0,
              blur: 4,
              opacity: 0.24
            }
          },
          track: {
            background: '#fff',
            strokeWidth: '67%',
            margin: 0, // margin is in pixels
            dropShadow: {
              enabled: true,
              top: -3,
              left: 0,
              blur: 4,
              opacity: 0.35
            }
          },

          dataLabels: {
            showOn: 'always',
            name: {
              offsetY: -20,
              show: true,
              color: '#111',
              fontSize: '25px'
            },
            value: {
              formatter: function(val) {
                return '90%';
              },
              color: '#888',
              fontSize: '20px',
              show: true,
            }
          }
        }
      },
      fill: {
        type: 'gradient',
        gradient: {
          shade: 'dark',
          type: 'horizontal',
          shadeIntensity: 0.5,
          gradientToColors: ['#63B8FF'],
          inverseColors: true,
          opacityFrom: 1,
          opacityTo: 1,
          stops: [0, 100]
        }
      },
      series: [90],
      stroke: {
        lineCap: 'round'
      },
      labels: ['CSS'],

    }
      //js
      var js = {
      chart: {
        height: 290,
        type: 'radialBar',
      },
      plotOptions: {
        radialBar: {
          startAngle: 0,
          endAngle: 360,
           hollow: {
            margin: 0,
            size: '70%',
            background: '#fff',
            image: undefined,
            imageOffsetX: 0,
            imageOffsetY: 0,
            position: 'front',
            dropShadow: {
              enabled: true,
              top: 3,
              left: 0,
              blur: 4,
              opacity: 0.24
            }
          },
          track: {
            background: '#fff',
            strokeWidth: '67%',
            margin: 0, // margin is in pixels
            dropShadow: {
              enabled: true,
              top: -3,
              left: 0,
              blur: 4,
              opacity: 0.35
            }
          },

          dataLabels: {
            showOn: 'always',
            name: {
              offsetY: -20,
              show: true,
              color: '#111',
              fontSize: '25px'
            },
            value: {
              formatter: function(val) {
                return '70%';
              },
              color: '#888',
              fontSize: '20px',
              show: true,
            }
          }
        }
      },
      fill: {
        type: 'gradient',
        gradient: {
          shade: 'dark',
          type: 'horizontal',
          shadeIntensity: 0.5,
          gradientToColors: ['#63B8FF'],
          inverseColors: true,
          opacityFrom: 1,
          opacityTo: 1,
          stops: [0, 100]
        }
      },
      series: [70],
      stroke: {
        lineCap: 'round'
      },
      labels: ['JAVASCRIPT'],

    }
      //vue
      var vue = {
      chart: {
        height: 290,
        type: 'radialBar',
      },
      plotOptions: {
        radialBar: {
          startAngle: 0,
          endAngle: 360,
           hollow: {
            margin: 0,
            size: '70%',
            background: '#fff',
            image: undefined,
            imageOffsetX: 0,
            imageOffsetY: 0,
            position: 'front',
            dropShadow: {
              enabled: true,
              top: 3,
              left: 0,
              blur: 4,
              opacity: 0.24
            }
          },
          track: {
            background: '#fff',
            strokeWidth: '67%',
            margin: 0, // margin is in pixels
            dropShadow: {
              enabled: true,
              top: -3,
              left: 0,
              blur: 4,
              opacity: 0.35
            }
          },

          dataLabels: {
            showOn: 'always',
            name: {
              offsetY: -20,
              show: true,
              color: '#111',
              fontSize: '25px'
            },
            value: {
              formatter: function(val) {
                return '70%';
              },
              color: '#888',
              fontSize: '20px',
              show: true,
            }
          }
        }
      },
      fill: {
        type: 'gradient',
        gradient: {
          shade: 'dark',
          type: 'horizontal',
          shadeIntensity: 0.5,
          gradientToColors: ['#63B8FF'],
          inverseColors: true,
          opacityFrom: 1,
          opacityTo: 1,
          stops: [0, 100]
        }
      },
      series: [70],
      stroke: {
        lineCap: 'round'
      },
      labels: ['VUE'],

    }
      //jq
      var jq = {
      chart: {
        height: 290,
        type: 'radialBar',
      },
      plotOptions: {
        radialBar: {
          startAngle: 0,
          endAngle: 360,
           hollow: {
            margin: 0,
            size: '70%',
            background: '#fff',
            image: undefined,
            imageOffsetX: 0,
            imageOffsetY: 0,
            position: 'front',
            dropShadow: {
              enabled: true,
              top: 3,
              left: 0,
              blur: 4,
              opacity: 0.24
            }
          },
          track: {
            background: '#fff',
            strokeWidth: '67%',
            margin: 0, // margin is in pixels
            dropShadow: {
              enabled: true,
              top: -3,
              left: 0,
              blur: 4,
              opacity: 0.35
            }
          },

          dataLabels: {
            showOn: 'always',
            name: {
              offsetY: -20,
              show: true,
              color: '#111',
              fontSize: '25px'
            },
            value: {
              formatter: function(val) {
                return '80%';
              },
              color: '#888',
              fontSize: '20px',
              show: true,
            }
          }
        }
      },
      fill: {
        type: 'gradient',
        gradient: {
          shade: 'dark',
          type: 'horizontal',
          shadeIntensity: 0.5,
          gradientToColors: ['#63B8FF'],
          inverseColors: true,
          opacityFrom: 1,
          opacityTo: 1,
          stops: [0, 100]
        }
      },
      series: [80],
      stroke: {
        lineCap: 'round'
      },
      labels: ['JQUERY'],

    }
      //wechat
      var wechat = {
      chart: {
        height: 290,
        type: 'radialBar',
      },
      plotOptions: {
        radialBar: {
          startAngle: 0,
          endAngle: 360,
           hollow: {
            margin: 0,
            size: '70%',
            background: '#fff',
            image: undefined,
            imageOffsetX: 0,
            imageOffsetY: 0,
            position: 'front',
            dropShadow: {
              enabled: true,
              top: 3,
              left: 0,
              blur: 4,
              opacity: 0.24
            }
          },
          track: {
            background: '#fff',
            strokeWidth: '67%',
            margin: 0, // margin is in pixels
            dropShadow: {
              enabled: true,
              top: -3,
              left: 0,
              blur: 4,
              opacity: 0.35
            }
          },

          dataLabels: {
            showOn: 'always',
            name: {
              offsetY: -20,
              show: true,
              color: '#111',
              fontSize: '25px'
            },
            value: {
              formatter: function(val) {
                return '60%';
              },
              color: '#888',
              fontSize: '20px',
              show: true,
            }
          }
        }
      },
      fill: {
        type: 'gradient',
        gradient: {
          shade: 'dark',
          type: 'horizontal',
          shadeIntensity: 0.5,
          gradientToColors: ['#63B8FF'],
          inverseColors: true,
          opacityFrom: 1,
          opacityTo: 1,
          stops: [0, 100]
        }
      },
      series: [60],
      stroke: {
        lineCap: 'round'
      },
      labels: ['小程序'],
}
      //HTML
    var html = new ApexCharts(
      document.querySelector("#html"),
      html
    );
    //css
    var css = new ApexCharts(
      document.querySelector("#css"),
      css
    );
    //js
    var js = new ApexCharts(
      document.querySelector("#js"),
      js
    );
    //vue
    var vue = new ApexCharts(
      document.querySelector("#vue"),
      vue
    );
    //jq
    var jq = new ApexCharts(
      document.querySelector("#jq"),
      jq
    );
    //wechat
    var wechat = new ApexCharts(
      document.querySelector("#wechat"),
      wechat
    );
    html.render();
    css.render();
    js.render();
    jq.render();
    vue.render();
    wechat.render();
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
    .border{
      color: #fff;
      font-size: 1.8rem;
      transition: all 1.5s;
      -moz-transition: all 1.5s;
      -webkit-transition: all 1.5s;
    }
  

    .border:hover{
      box-shadow: 0.5px 0.5px 0.5px #c8c8c8 ;
      background-color: #fff;
      border-radius: 25px;
      color: #000;
      
    }
    *{
      font-family: "Space Mono", Arial, serif;  
    }
    .skill{
      background-color:#63B8FF; 
    }
    h1{
      margin-top: 4rem;
        font-size: 4rem;
    }
  </style>
  